<template>
    <div>
        <el-row>
            <el-col :offset="6" :span="11">
                <div class="topic" 
                v-for="topic in topics" 
                :Key="topic.id"
                @click="problemList(topic.id)"
                >
                    <p>
                        <span class="title">话题：</span>{{topic.topicName}}
                        <span class="pay"
                        @click.stop="pay(topic)"
                        
                        ><i class="el-icon-plus" v-show="!topic.pay"></i>{{topic.pay?'已关注':'关注'}}</span>
                    </p>  
                    <p v-if="topic.introduce"><span class="title">介绍：</span>{{topic.introduce}}</p>
                   
                    <el-divider></el-divider>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {postRequest,getRequest} from '../utils/api.js'
export default {
    name: 'Topic',

    data() {
        return {
            topics:[]
        };
    },

    mounted() {

        getRequest('/qa/topic/searchTopics').then((result) => {
                this.topics = result;
        }).catch((err) => {
                
        });
    },

    methods: {
        problemList(id){
            this.$router.push({
                name:"problemList",
                query:{
                    id
                }
            })
        },
        pay(topic){

            if(topic.pay){
                this.$message.warning({message:'已经关注了'})
                return;
            }
            getRequest('/user/follow/followTopic/'+topic.id).then((result) => {
              
                this.$set(topic,'pay',true);
            }).catch((err) => {
                    
            });
        },
    },
};
</script>

<style scoped>
.title{
    color:#225599;
}
.topic{
    cursor: pointer;
}
.pay{
    margin-left: 40px;
    color: #225599;
}
</style>